<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(function () {
            $("#flip").click(function () {
                // 1 下滑
                // $("#panel").slideDown("slow");

                // 2 上滑
                // $("#panel").slideDown("slow");

                // 3 上下滑之间切换
                // $(selector).slideToggle(speed,callback);两个参数
                $("#panel").slideToggle();
            });
        });
    </script>

    <style type="text/css">
        #panel,
        #flip {
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
        }

        #panel {
            padding: 50px;
            display: none;
        }
    </style>
</head>

<body>
    <div id="flip">点我滑动面板</div>
    <div id="panel">Hello world!</div>
</body>

</html>